<template>
  <div class="carsdetilview">
    <!-- 骨架 -->
    <!-- <van-skeleton title :row="3" /> -->
    <div v-if="infodata && querydata.type == 0 ">
      <van-form :colon="true">
        <van-field
          v-model="infodata.ownerName"
          required
          readonly
          input-align="right"
          name="车主姓名"
          label="车主姓名"
          placeholder="请输入车主姓名"
          :rules="[{ required: true, message: '请填写车主姓名' }]"
        />
        <van-field
          v-model="infodata.carPlate"
          required
          readonly
          input-align="right"
          name="车牌号码"
          label="车牌号码"
          placeholder="请输入车牌号码"
          :rules="[{ required: true, message: '请填写车牌号码' }]"
        />
        <van-field
          v-model="infodata.czrXm"
          required
          input-align="right"
          readonly
          name="出租人姓名"
          label="出租人姓名"
          placeholder="请输入出租人姓名"
          :rules="[{ required: true, message: '请填写车主姓名' }]"
        />
        <van-field
          v-model="infodata.czrSfzh"
          required
          readonly
          input-align="right"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          :rules="[{ required: true, message: '请填写身份证号码' }]"
        />
        <van-field
          v-model="infodata.czrSjhm"
          required
          readonly
          input-align="right"
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          v-model="infodata.czrYhzh"
          required
          readonly
          :label-width="110"
          input-align="right"
          name="出租人银行账号"
          label="出租人银行账号"
          placeholder="请输入出租人银行账号"
          :rules="[{ required: true, message: '请填写出租人银行账号' }]"
        />
        <van-field
          v-model="infodata.czrKhyh"
          required
          readonly
          input-align="right"
          name="开户银行"
          label="开户银行"
          placeholder="请输入开户银行"
          :rules="[{ required: true, message: '请填写开户银行' }]"
        />
        <van-field
          v-model="infodata.czrGzdw"
          required
          readonly
          :label-width="110"
          input-align="right"
          name="工作单位全称"
          label="工作单位全称"
          placeholder="请输入工作单位全称"
          :rules="[{ required: true, message: '请填写工作单位全称' }]"
        />
        <!-- <van-field
          v-model="infodata.zjtcPrice"
          required
          readonly
          input-align="right"
          name="套餐金额"
          label="套餐金额"
          placeholder="套餐金额"
          :rules="[{ required: true, message: '请填写工作单位全称' }]"
        />
        <van-field
          v-model="infodata.tcykzrPrice"
          required
          readonly
          :label-width="110"
          input-align="right"
          name="油卡充值金额"
          label="油卡充值金额"
          placeholder="油卡充值金额"
          :rules="[{ required: true, message: '请填写油卡充值金额' }]"
        />
        <van-field
          v-model="infodata.ykzcYhkh"
          required
          readonly
          :label-width="110"
          input-align="right"
          name="转出银行卡号"
          label="转出银行卡号"
          placeholder="请输入转出银行卡号"
          :rules="[{ required: true, message: '请填写转出银行卡号' }]"
        />/>
        <van-field
          v-model="infodata.ykzcKhyh"
          required
          readonly
          :label-width="110"
          input-align="right"
          name="转出开户银行"
          label="转出开户银行"
          placeholder="请输入转出开户银行  "
          :rules="[{ required: true, message: '请填写转出开户银行' }]"
        />

        <van-field
          v-model="infodata.jcfwfPrice"
          required
          :label-width="120"
          input-align="right"
          name="基础服务费"
          label="基础服务费"
          placeholder="请输入基础服务费 "
          :rules="[{ required: false, message: '请填写套餐油卡充值金额' }]"
        />
        <van-field
          v-model="infodata.tcykczPrice"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="套餐油卡充值金额"
          label="套餐油卡充值金额"
          placeholder="请输入套餐油卡充值金额 "
          :rules="[{ required: true, message: '请填写套餐油卡充值金额' }]"
        /> -->


        <van-cell required title="身份证正面：" />
        <van-image width="100" height="100" :src="datalist[0]" />
        <van-cell required title="身份证国徽面：" />
        <van-image width="100" height="100" :src="datalist[1]" />
        <van-cell required title="汽车行驶证：" />
        <van-image width="100" height="100" :src="datalist[2]" />
        <van-cell required title="行驶证照片：" />
        <van-image width="100" height="100" :src="datalist[3]" />
      </van-form>
    </div>

    <div v-if="infodata && querydata.type == 1 ">
      <van-form :colon="true">
        <van-field
          v-model="infodata.ownerName"
          required
          readonly
          input-align="right"
          name="车主姓名"
          label="车主姓名"
          placeholder="请输入车主姓名"
         
        />
        <!-- <van-field v-model="infodata.carType" name="车辆型号" label="车辆型号" placeholder="请输入车辆型号" /> -->
        <van-field
          v-model="infodata.carPlate"
          required
          readonly
          input-align="right"
          name="车牌号码"
          label="车牌号码"
          placeholder="请输入车牌号码"
          
        />

        <van-field
          v-model="infodata.czrXm"
          required
          readonly
          input-align="right"
          name="出租人姓名"
          label="出租人姓名"
          placeholder="请输入出租人姓名"
          
        />
        <van-field
          v-model="infodata.czrSfzh"
          required
          readonly
          input-align="right"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          
        />
        <van-field
          v-model="infodata.czrSjhm"
          required
          readonly
          input-align="right"
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
          
        />
        <van-field
          v-model="infodata.czrYhzh"
          required
          readonly
          input-align="right"
          name="出租人银行账号"
          label="出租人银行账号"
          placeholder="请输入出租人银行账号"
          
        />
        <van-field
          v-model="infodata.czrKhyh"
          required
          readonly
          input-align="right"
          name="开户银行"
          label="开户银行"
          placeholder="请输入开户银行"
         
        />
        <van-field
          v-model="infodata.czrGzdw"
          input-align="right"
          readonly
          name="工作单位全称"
          label="工作单位全称"
          placeholder="请输入工作单位全称"
         
        />
        <van-field
          v-model="infodata.zjtcPrice"
          required
          
          input-align="right"
          name="套餐金额"
          label="套餐金额"
          placeholder="套餐金额"
         
        />
        <van-field
          v-model="infodata.tcykzrPrice"
          required
          
          :label-width="110"
          input-align="right"
          name="油卡充值金额"
          label="油卡充值金额"
          placeholder="油卡充值金额"
          :rules="[{ required: true, message: '请填写油卡充值金额' }]"
        />
        <van-field
          v-model="infodata.ykzcYhkh"
          required
          
          :label-width="110"
          input-align="right"
          name="转出银行卡号"
          label="转出银行卡号"
          placeholder="请输入转出银行卡号"
          :rules="[{ required: true, message: '请填写转出银行卡号' }]"
        />
        <van-field
          v-model="infodata.ykzcKhyh"
          required
          
          :label-width="110"
          input-align="right"
          name="转出开户银行"
          label="转出开户银行"
          placeholder="请输入转出开户银行  "
          :rules="[{ required: true, message: '请填写转出开户银行' }]"
        />
        <van-cell required title="套餐油卡充值金额">
          <template>
            <van-stepper step="500" min="1500" integer v-model="infodata.tcykczPrice" />
          </template>
        </van-cell>
         <van-cell required title="基础服务费" v-if="infodata.tcykczPrice>= 3000">
          <template>
            <van-stepper step="5000" min="5000" max="10000" input-width="40" integer v-model="infodata.jcfwfPrice" />
          </template>
        </van-cell>
        <van-calendar v-model="dateshow" type="range" @confirm="onConfirm" />

        <van-cell required title="身份证正面：" />
        <van-row>
          <van-col span="12">
            <van-image width="100" height="100" :src="datalist[0]" />
          </van-col>
          <van-col span="12">
            <van-uploader :after-read="afterRead1" multiple :max-count="1" />
          </van-col>
        </van-row>

        <van-cell required title="身份证国徽面：" />
        <van-row>
          <van-col span="12">
            <van-image width="100" height="100" :src="datalist[1]" />
          </van-col>
          <van-col span="12">
            <van-uploader :after-read="afterRead2" multiple :max-count="1" />
          </van-col>
        </van-row>

        <van-cell required title="汽车行驶证：" />
        <van-row>
          <van-col span="12">
            <van-image width="100" height="100" :src="datalist[2]" />
          </van-col>
          <van-col span="12">
            <van-uploader :after-read="afterRead3" multiple :max-count="1" />
          </van-col>
        </van-row>
        <van-cell required title="行驶证照片：" />
        <van-row>
          <van-col span="12">
            <van-image width="100" height="100" :src="datalist[3]" />
          </van-col>
          <van-col span="12">
            <van-uploader :after-read="afterRead4" multiple :max-count="1" />
          </van-col>
        </van-row>
      </van-form>
      <div class="bottonbottom" v-if="infodata && querydata.type == 1 ">
        <van-button type="info" @click="editinfo">修改</van-button>
        <van-button type="info" @click="tijiaoinfo">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateshow: false,
      querydata: {
        carId: undefined,
        type: undefined
      },
      datalist: ["", "", "", ""],
      date: undefined,
      infodata: undefined
    };
  },
  created() {
    this.querydata.carId = this.$route.query.id;
    this.querydata.type = this.$route.query.type;
    this.getData();
  },
  methods: {
    tijiaoinfo() {
      let data = {
        carId: this.querydata.carId
      };
      this.$Api.get("/api/cqhCar/confirmCar", data).then(res => {
        if (res.data.code == 200) {
          this.$dialog.toast({
            mes: "确认完成",
            icon: "success",
            timeout: 1500
          });
          this.$router.back(-1);
        } else {
          this.$dialog.toast({
            mes: res.data.message,
            icon: "error",
            timeout: 1500
          });
        }
      });
    },
    afterRead1(e) {
      let _vm = this;
      var myform = new FormData();
      myform.append("file", e.file);
      myform.append("photoType", "btnUpSfz1");
      myform.append("carId", _vm.infodata.carId);

      this.$Api.post("/api/img/photoupload", myform).then(res => {
        if (res.data.code == 200) {
          _vm.datalist.splice(0, 1, e.content);

          this.$dialog.toast({
            mes: "上传完成",
            icon: "success",
            timeout: 1500
          });
        } else {
          this.$dialog.toast({
            mes: res.data.message,
            icon: "error",
            timeout: 1500
          });
        }
      });
    },
    afterRead2(e) {
      let _vm = this;
      var myform = new FormData();
      myform.append("file", e.file);
      myform.append("photoType", "btnUpSfz2");
      myform.append("carId", _vm.infodata.carId);

      this.$Api.post("/api/img/photoupload", myform).then(res => {
        if (res.data.code == 200) {
          _vm.datalist.splice(1, 1, e.content);

          this.$dialog.toast({
            mes: "上传完成",
            icon: "success",
            timeout: 1500
          });
        } else {
          this.$dialog.toast({
            mes: res.data.message,
            icon: "error",
            timeout: 1500
          });
        }
      });
    },
    afterRead3(e) {
      let _vm = this;
      var myform = new FormData();
      myform.append("file", e.file);
      myform.append("photoType", "btnUpCar1");
      myform.append("carId", _vm.infodata.carId);

      this.$Api.post("/api/img/photoupload", myform).then(res => {
        if (res.data.code == 200) {
          _vm.datalist.splice(2, 1, e.content);
          this.$dialog.toast({
            mes: "上传完成",
            icon: "success",
            timeout: 1500
          });
        } else {
          this.$dialog.toast({
            mes: res.data.message,
            icon: "error",
            timeout: 1500
          });
        }
      });
    },
    afterRead4(e) {
      let _vm = this;
      var myform = new FormData();
      myform.append("file", e.file);
      myform.append("photoType", "btnUpCar2");
      myform.append("carId", _vm.infodata.carId);

      this.$Api.post("/api/img/photoupload", myform).then(res => {
        if (res.data.code == 200) {
          _vm.datalist.splice(3, 1, e.content);
          this.$dialog.toast({
            mes: "上传完成",
            icon: "success",
            timeout: 1500
          });
        } else {
          this.$dialog.toast({
            mes: res.data.message,
            icon: "error",
            timeout: 1500
          });
        }
      });
    },
    getData() {
      this.$Api
        .get("/api/cqhCar/getCarInfomation", this.querydata)
        .then(res => {
          if (res.data.code == 200) {
            this.date = `${this.formatDate(
              res.data.data.car.czqxQ
            )} / ${this.formatDate(res.data.data.car.czqxZ)}`;
            this.infodata = res.data.data.car;
            if (res.data.data.sfz1) {
              this.datalist[0] = "data:image/png;base64," + res.data.data.sfz1;
            }
            if (res.data.data.sfz2) {
              this.datalist[1] = "data:image/png;base64," + res.data.data.sfz2;
            }
            if (res.data.data.car1) {
              this.datalist[2] = "data:image/png;base64," + res.data.data.car1;
            }
            if (res.data.data.car1) {
              this.datalist[3] = "data:image/png;base64," + res.data.data.car2;
            }
          }
        });
    },
    editinfo() {
      this.$Api.post("/api/cqhCar/updateCarInfo", this.infodata).then(res => {
        if (res.data.code == 200) {
          this.$dialog.toast({
            mes: "修改成功",
            icon: "success",
            timeout: 1500
          });
        } else {
          this.$dialog.toast({
            mes: "修改失败",
            icon: "success",
            timeout: 1500
          });
        }
      });
    },
    onConfirm(date) {
      const [start, end] = date;

      this.infodata.czqxQ = this.getshijianchuo(start);
      this.infodata.czqxZ = this.getshijianchuo(end);
      this.dateshow = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    getshijianchuo(stringTime) {
      var timestamp2 = Date.parse(new Date(stringTime));
      //		timestamp2 = timestamp2;
      return timestamp2;
    },
    afterRead(e) {},
    formatDate(a) {
      let now = new Date(a);
      var year = now.getFullYear(); //取得4位数的年份
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate(); //返回日期月份中的天数（1到31）

      return year + "-" + month + "-" + date;
    }
  }
};
</script>

<style scoped>
.carsdetilview {
}

.carsdetil {
  margin: 0.5rem;
}

.carsdetilToCar {
  display: flex;
  align-items: center;
}

.carsdetilToCar1 {
}

.carsdetilToCar2 {
  line-height: 3rem;
}

.carsdetilToCar3 {
  width: 100%;
  line-height: 2rem;
  padding: 1rem;
}

.carsdetilToCar3info {
  display: flex;
}

.carsdetilToCar3infop {
  flex: 2;
}

.carsdetilToCar3infoimg {
  flex: 3;
}

.cardAndSh {
  box-shadow: 0 0 10px #c8c9c8;
  border: 0.1rem solid #b6b6b6;
  border-radius: 10px;
}

.bottonbottom {
  margin: 0.5rem 0.8rem;
  text-align: right;
}

.marginTB5remTR0 {
  margin: 0.5rem 0;
}
</style>
